Demo component
Example #1
Section: Full-width
Colour: Brand dark
By default the % symbol displays.
Example #2
Section: 3/4 centred
Colour: Brand light
Only % values up to 100 may be entered. The number may have 1 decimal point only, for example, 50.9.
Text here to complement the ring
This text can further expand on the key statistic that is being highlighted above. You could include further statistics, reference material or research information that supports or expands on the above statistic.
Example #3
Section: Halves
Colour: Brand supplementary
Compare 2 figures over time.
of people participated in the example project in 2017.
of people participated in the example project in 2023.
Example #4
Section: Thirds - works best without an item description.
Colour: Brand accent / dark / supplementary
Text here in a small container reduces the size of the ring on desktop.